<#if (comments?size!=0)>
	<div class="comment">
		<div class="comment_title">Comment</div>
		<ul>
		 <#list comments as comment>
	    	<li>
	            <p>
	                <span class="floatr comment_time">${comment.createDate?string("yyyy-MM-dd HH:mm:ss")}</span>
	                <span class="username">${comment.member.name}</span>
	            </p>
	            <div class="clear"></div>
	            <p><span class="Quotes">"</span>${comment.content}<span class="Quotes">"</span></p>
	        </li>
	     </#list>        
	    </ul>
	</div>
	<!--end:comment-->
	<div class="page">
	</div>
<form name="pageForm">
 <input type="hidden" name="pageNum" value="${pager.pageNum}"/>
 <input type="hidden" name="numPerPage" value="${pager.numPerPage}"/> 
</form>
<!--end:page-->
<script type="text/javascript" src="${base}/template/js/jquery.pager.js"/>
<script type="text/javascript">
$(function() {
	$(".page").pager({
		pagenumber: ${pager.pageNum},
		pagecount: ${pager.pageCount},
		pagesize:${pager.numPerPage},
		buttonClickCallback: function(num){
		    var $pageSize=$("select[name='numPerPage']").find("option:selected").val();
			var $form=$("form[name='pageForm']");
			var $url="${base}/comment/${id}";
			$form.attr("action",$url);
			$form.find("input[name='pageNum']").val(num);
			$form.find("input[name='numPerPage']").val($pageSize);
			loadComments($form.attr("action"),$form.serialize());
		}
	});
	$("select[name='numPerPage']").change(function(){
	     var $this=$(this);
	     var $pageSize=$this.find("option:selected").val();
	     var $form=$("form[name='pageForm']");
	     var $url="${base}/comment/${id}";
		 $form.attr("action",$url);
	     $form.find("input[name='numPerPage']").val($pageSize);
	     loadComments($form.attr("action"),$form.serialize()); 
	});
});
</script>
</#if>